<template>
    <div class="divBox">
        <el-card class="box-card">
            <div class="clearfix">
                <el-tabs v-if="headTab.length > 0" v-model="currentTab">
                    <el-tab-pane
                    v-for="(item, index) in headTab"
                    :key="index"
                    :name="item.name"
                    :label="item.title"
                    />
                </el-tabs>
            </div>
            <el-form
              ref="formValidate"
              :key="currentTab"
              v-loading="fullscreenLoading"
              class="formValidate mt20"
              :rules="ruleValidate"
              :model="formValidate"
              label-width="130px"
              @submit.native.prevent
            >
              <el-row v-if="currentTab == '1'" :gutter="24">
                 <el-col :span="6" v-if="!$route.params.id">
                  <el-form-item label="所属酒店：" prop="hotel_id">
                    <el-autocomplete
                    v-model="hotel_name"
                    prefix-icon="el-icon-search"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入搜索选择酒店"
                    class="pageWidth"
                    @select="handleSelectHotel"
                  >
                    <template slot-scope="{ item }">
                      <div class="name" >
                        {{ item.name }}
                      </div>
                    </template>
                  </el-autocomplete>
                  </el-form-item>
                </el-col>
               
                <el-col :span="6" v-if="$route.params.id">
                  <el-form-item label="所属酒店：" prop="hotel_id">
                      <el-input
                      v-model="hotel_name"
                      placeholder="请输入所属酒店"
                      size="small"
                      class="pageWidth"
                      disabled
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="房型名称：" prop="name">
                    <el-input
                      v-model="formValidate.name"
                      placeholder="请输入房型名称"
                      size="small"
                      class="pageWidth"
                    />
                  </el-form-item>
                </el-col>
               
            
                <el-col :span="12">
                  <el-form-item label="房型面积：" prop="area">
                    <el-input
                      v-model="formValidate.area"
                      placeholder="请输入房型面积"
                      size="small"
                      class="pageWidth"
                    />
                  </el-form-item>
                </el-col>
 
                

               
                <el-col :span="24" >
                  <el-form-item label="房型楼层：" prop="floor">
                    <el-input
                      v-model="formValidate.floor"
                      type="number"
                      placeholder="请输入房型楼层"
                      size="small"
                      class="pageWidth"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="24" >
                  <el-form-item label="最大入住人数：" prop="max_guests">
                    <el-input
                      v-model="formValidate.max_guests"
                      type="number"
                      placeholder="请输入最大入住人数"
                      size="small"
                      class="pageWidth"
                    />
                  </el-form-item>
                </el-col>

                <el-col :span="24" >
                  <el-form-item label="房型价格：" prop="price">
                    <el-input
                      v-model="formValidate.price"
                      type="number"
                      placeholder="请输入房型价格："
                      size="small"
                      class="pageWidth"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="24" >
                  <el-form-item label="最小连住天数：" prop="min_book_days">
                    <el-input
                      v-model="formValidate.min_book_days"
                      type="number"
                      placeholder="请输入最小连住天数"
                      size="small"
                      class="pageWidth"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="24" >
                  <el-form-item label="最大连住天数：" prop="max_book_days">
                    <el-input
                      v-model="formValidate.max_book_days"
                      type="number"
                      placeholder="请输入最大连住天数 0:不限制"
                      size="small"
                      class="pageWidth"
                    />
                  </el-form-item>
                </el-col>

                <el-col :span="24">
                  <el-form-item label="床型：" prop="bed_type">
                    <el-input
                      v-model="formValidate.bed_type"
                      placeholder="请输入床型"
                      size="small"
                      class="pageWidth"
                    />
                  </el-form-item>
                </el-col>
                

                <el-col :span="24" >
                  <el-form-item label="是否有wifi：" prop="is_wifi">
                    <el-switch
                      v-model="formValidate.is_wifi"
                      :active-value="1"
                      :inactive-value="0"
                      active-text="是"
                      inactive-text="否"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="24" >
                  <el-form-item label="是否有窗：" prop="is_window">
                    <el-switch
                      v-model="formValidate.is_window"
                      :active-value="1"
                      :inactive-value="0"
                      active-text="是"
                      inactive-text="否"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="24" >
                  <el-form-item label="是否禁烟：" prop="is_smoke">
                    <el-switch
                      v-model="formValidate.is_smoke"
                      :active-value="1"
                      :inactive-value="0"
                      active-text="是"
                      inactive-text="否"
                    />
                  </el-form-item>
                </el-col>

                
             
                <el-col :span="24">
                  <el-form-item label="酒店轮播图：" prop="slider_image">
                    <div class="acea-row">
                      <div
                        v-for="(item, index) in formValidate.slider_image"
                        :key="index"
                        class="pictrue"
                        draggable="false"
                        @dragstart="handleDragStart($event, item)"
                        @dragover.prevent="handleDragOver($event, item)"
                        @dragenter="handleDragEnter($event, item)"
                        @dragend="handleDragEnd($event, item)"
                      >
                        <img :src="item">
                        <i
                          class="el-icon-error btndel"
                          @click="handleRemove(index)"
                        />
                      </div>
                      <div
                        v-if="formValidate.slider_image.length < 10"
                        class="uploadCont"
                        title="750*750px"
                      >
                        <div class="upLoadPicBox" @click="modalPicTap('2')">
                          <div class="upLoad">
                            <i class="el-icon-camera cameraIconfont" />
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-form-item>
                </el-col>
            
              </el-row>
              <el-row v-if="currentTab == '2'" :gutter="24">
                <el-col :span="24">
                  <el-form-item label="房型详情：" >
                    <vue-ueditor-wrap v-model="formValidate.hotel_room_detail" @beforeInit="addCustomDialog" :config="myConfig3"  style="width: 90%" ></vue-ueditor-wrap>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row v-if="currentTab == '3'" :gutter="24">
                <el-col :span="24">
                  <el-form-item label="">
                    <el-button
                    type="primary"
                    icon="el-icon-plus"
                    class="mr15"
                    size="small"
                    @click="addmealShow"
                  >添加套餐</el-button>
                  </el-form-item>
                </el-col>
                <el-col :span="24" v-show="formValidate.ManyMeal && formValidate.ManyMeal.length">
                <div class="display-flex  " style="margin-left: 50px;">
                  
                    <div @click="selectMealHanele(index)" v-for="(meal ,index) in formValidate.ManyMeal" :class="selectMealIndex==index?'meal-bl-select':'meal-bl-noselect'" class="display-flex-column  mr-20" >
                      <div class="display-flex" style="position: relative;">
                        <div> 套餐{{(index + 1) }} </div>
                        <div @click.stop="editMeal(meal ,index)" v-show="selectMealIndex==index" class="ml-auto"> <i style="color: #3c72e4;" class="el-icon-edit-outline ml-10 text-18" ></i></div>
                        <div class="del-box"  @click.stop="deleteMeal(index)">
                            <span class="iconfont iconcha"></span>
                        </div>
                      </div>
                      <div  class="line2">{{meal.name}} </div>
                      <div> ￥{{meal.price}}</div>
                    </div>
                  </div>
                </el-col>
              </el-row> 
              <el-row v-if="currentTab == '4'" :gutter="24">
                <el-col  :span="24" v-show="formValidate.ManyMeal && formValidate.ManyMeal.length ">
                  <div class="display-flex  ">
                    <div @click="selectMealHanele(index)" v-for="(meal ,index) in formValidate.ManyMeal" :class="selectMealIndex==index?'meal-bl-select':'meal-bl-noselect'" class="display-flex-column  mr-20" >
                      <div class="display-flex">
                        <div> 套餐{{(index + 1) }} </div>
                      </div>
                      <div  class="line2">{{meal.name}}</div>
                    </div>
                  </div>
                  <div  v-for="(meal ,index) in formValidate.ManyMeal" >
                    <datePriceBox v-show="selectMealIndex==index"  @changePriceDate="changeManyMealPriceDate" :meal_index="index" :ref="'manyMealDatePrice'+index"  :dateArr="meal.productPriceDate"></datePriceBox>
                  </div>
                </el-col>

                <el-col :span="8"  v-show="!(formValidate.ManyMeal && formValidate.ManyMeal.length) ">
                   <el-alert
                    title="请添加房型套餐"
                    type="error"
                    effect="dark">
                  </el-alert>
                </el-col>
              </el-row>
              <div class="footer">
                <el-form-item style="margin-top:30px;">
                <el-button
                  v-show="currentTab > 1"
                  type="primary"
                  class="submission"
                  size="small"
                  @click="handleSubmitUp"
                >上一步
                </el-button>
                <el-button
                  v-show="currentTab < 4"
                  type="primary"
                  class="submission"
                  size="small"
                  @click="handleSubmitNest('formValidate')"
                >下一步
                </el-button>
                <el-button
                  v-show="currentTab == '4' && $route.params.id"
                  :loading="loading"
                  type="primary"
                  class="submission"
                  size="small"
                  @click="handleSubmit('formValidate',false)"
                >保存
                </el-button>
                <el-button
                  v-show="currentTab == '4' || $route.params.id"
                  :loading="loading"
                  type="primary"
                  class="submission"
                  size="small"
                  @click="handleSubmit('formValidate',true)"
                >提交
                </el-button>
              </el-form-item>

              </div>
              
            </el-form>

        </el-card>
       
        <el-dialog :visible.sync="choseLocShow" title="请选择经纬度"  width="1000px">
          <div>
            <choseLoc @getLngLat="getLngLat"></choseLoc>
          </div>
        </el-dialog>

         <el-dialog
        v-if="mealShowVisible"
        title="添加套餐"
        :visible.sync="mealShowVisible"
        width="50%"
        append-to-body
        :close-on-click-modal="false"
      >
        <div class="container display-flex display-flex-column display-flex-justify-center">
          <el-form :rules="ruleValidate" :model="tempMeal" label-width="150px" size="small">
            <el-form-item  label="套餐标题：" prop="temp_meal_title"  :rules="ruleValidate.temp_meal_title">
              <el-input v-model="tempMeal.name"  placeholder="请输入套餐标题" class="selWidth" size="small"  /> 
            </el-form-item>
            <el-form-item  label="套餐描述：">
              <el-input v-model="tempMeal.description"  placeholder="请输入套餐描：" class="selWidth" size="small"  /> 
            </el-form-item>
             <el-form-item  label="套餐价格：">
              <el-input v-model="tempMeal.price" type="number"  placeholder="请输入套餐最低价格" class="selWidth" size="small"  /> 
            </el-form-item>
             
             
           
          </el-form>
          
        </div> 
        <span slot="footer" class="dialog-footer">
          <el-button @click="mealShowVisible = false" size="small">取消</el-button>
          <el-button v-if="tempMeal.index===''" type="primary" @click="handleAddMeal" size="small">确定添加</el-button>
          <el-button  v-else type="primary" @click="handleEditMeal" size="small">确定修改</el-button>

        </span>    
      </el-dialog> 
    
    </div>
  </template>
  
  <script>
  import VueUeditorWrap from 'vue-ueditor-wrap'
  import choseLoc from '@/components/choseLoc'
    import datePriceBox from './datePriceBox.vue'
  import {
 hotelLstApi,
  productGetTempKeysApi,
  searchLocByNameApi,
  hotelRoomTypeDetailApi,
  hotelRoomTypeSaveApi,
   getHotelFacilitylListApi,
  merSelectListApi
} from '@/api/product'

import {  onlineUpload } from '@/api/setting';
import SettingMer from '@/libs/settingMer';
import { getToken } from '@/utils/auth'
import { roterPre } from '@/settings'
  const defaultObj = {
        name: "",
        hotel_id:'',
        slider_image: '',
        area:'',
        floor: '',
        is_wifi: 1,
        is_window: 1,
        is_smoke: 1,
        bed_type: '',
        max_guests: '',
        description: '',
        price: '',
        min_book_days: 1,
        max_book_days: 0,
        hotel_room_detail: '',
        ManyMeal: [], // 多套餐

       
  }
  export default {
    name: "scenicAdd",
    components: {
      VueUeditorWrap,
      choseLoc,
      datePriceBox
    },
    data() {
      const url = SettingMer.https + '/upload/image/0/file?ueditor=1&token=' + getToken()
      return {
        tempMeal: {
          id: '',
          name: "",
          description: '',
          breakfast: 0,
          breakfast_type: '',
          productPriceDate: [],
          price: '',
          index: ''
        },
        mealShowVisible: false,
        selectMealIndex:0,
        hotel_name:'',
        myConfig: {
          autoHeightEnabled: false, // 编辑器不自动被内容撑高
          initialFrameHeight: 500, // 初始容器高度
          initialFrameWidth: '100%', // 初始容器
          enableAutoSave: false,
          UEDITOR_HOME_URL: '/UEditor/',
          'serverUrl': url,
          'imageUrl': url,
          'imageFieldName': 'file',
          imageUrlPrefix: '',
          'imageActionName': 'upfile',
          'imageMaxSize': 2048000,
          'imageAllowFiles': ['.png', '.jpg', '.jpeg', '.gif', '.bmp']
        },
        myConfig2: {
          autoHeightEnabled: false, // 编辑器不自动被内容撑高
          initialFrameHeight: 260, // 初始容器高度
          initialFrameWidth: '100%', // 初始容器
          enableAutoSave: false,
          UEDITOR_HOME_URL: '/UEditor/',
          'serverUrl': url,
          'imageUrl': url,
          'imageFieldName': 'file',
          imageUrlPrefix: '',
          'imageActionName': 'upfile',
          'imageMaxSize': 2048000,
          'imageAllowFiles': ['.png', '.jpg', '.jpeg', '.gif', '.bmp']
        },
        myConfig3: {
          autoHeightEnabled: false, // 编辑器不自动被内容撑高
          initialFrameHeight: 500, // 初始容器高度
          initialFrameWidth: '100%', // 初始容器
          enableAutoSave: false,
          UEDITOR_HOME_URL: '/UEditor/',
          'serverUrl': url,
          'imageUrl': url,
          'imageFieldName': 'file',
          imageUrlPrefix: '',
          'imageActionName': 'upfile',
          'imageMaxSize': 2048000,
          'imageAllowFiles': ['.png', '.jpg', '.jpeg', '.gif', '.bmp']
        },
        searTemp: '',
        currentTab: '1',
        headTab: [
            { title: '房型信息', name: '1' },
            { title: '房型详情', name: '2' },
            { title: '房型套餐', name: '3' },
            { title: '价格库存', name: '4' },

        ],
       
        facilityShow: false,
        gradeList: [
          {
            label: '无',
            value: '' 
          },
          {
            label: '1星',
            value: '1' 
          },
          {
            label: '2星',
            value: '2' 
          },
          {
            label: '3星',
            value: '3' 
          },
          {
            label: '4星',
            value: '4' 
          },
          {
            label: '5星',
            value: '5' 
          }
        ],
        formValidate: Object.assign({}, defaultObj),
        fullscreenLoading: false,
        grid: {
          xl: 8,
          lg: 8,
          md: 12,
          sm: 24,
          xs: 24
        },
       
        loading: false,
        ruleValidate: {
          hotel_id: [
            { required: true, message: '请选择酒店', trigger: 'change' }
          ],
          name: [
            { required: true, message: '请输入房型名称', trigger: 'blur' }
          ],
         
          area: [
            { required: true, message: '请输入房型面积', trigger: 'blur' }
          ],
           floor: [
            { required: true, message: '请选择房型所在楼层', trigger: 'blur' }
          ],
          price: [
            { required: true, message: '请输入房型价格', trigger: 'blur' }
          ],
          bed_type: [
            { required: true, message: '请输入床型', trigger: 'blur' }
          ],
          max_guests: [
            { required: true, message: '请输入最大入住人数', trigger: 'blur' }
          ],
          min_book_days: [
            { required: true, message: '请输入最小连住天数', trigger: 'blur' }
          ],
          min_book_days: [
            { required: true, message: '请输入最大连住天数', trigger: 'blur' }
          ],
          slider_image: [
            {
              required: true,
              message: '请上传酒店轮播图',
              type: 'array',
              trigger: 'change'
            }
          ]
        },
        upload: {
          videoIng: false // 是否显示进度条；
        },
        progress: 10, // 进度条默认0
        videoLink: '',
        choseLocShow: false,
        facilityList:[],
        flag: 0,
        modals: false,
        mealIndex: '',
        mealDetailIndex: '',
        mealList: [],

        merSelect: [],
      };
    },
    watch: {
     
      '$route.params.id': {
        handler: function(nVal,oVal) {
          if (nVal !== oVal && nVal){
            this.initData();
          }
        },
        immediate: false,
        deep: true
      }
    },
    mounted() {
      this.getMerSelect();
      this.initData();
      this.getHotelFacilitylList();
    },
   
    methods: {

      // 商户列表；
    getMerSelect() {
      merSelectListApi()
        .then(res => {
          this.merSelect = res.data;
        })
        .catch(res => {
          this.$message.error(res.message);
        });
    }, 

    selectLngLat(){
      this.choseLocShow = true;
    },
    getLngLat(e){
      console.log(11,e)
      this.formValidate.lng_lat = e;
      this.choseLocShow = false;
    },
      // 详情
    getInfo() {
      this.fullscreenLoading = true;
      hotelRoomTypeDetailApi({id: this.$route.params.id})
        .then(async res => {
          var data = res.data;
          // this.hotel_name = res.data.hotel.name
          this.$set(this,'hotel_name',data.hotel.name)
          this.fullscreenLoading = false;
          console.log('data',data)
          this.formValidate = data;
          console.log(' this.hotel_name ', this.hotel_name )
          this.formValidate.ManyMeal = data.hotelRoomPackages;
          
          // this.formValidate.label_ids = data.label_ids ? info.label_ids.split(",").map(Number) : []

        })
        .catch(res => {
          this.fullscreenLoading = false;
          this.$message.error(res.message);
        });
    },
    initData(){
  
      this.formValidate.slider_image = []
      if (this.$route.params.id) {
        this.getInfo()
      }
      
    },

   

     getHotelFacilitylList() {
      getHotelFacilitylListApi().then((res) => {
        this.facilityList = res.data;
      })
      .catch(({ message }) => {
        this.$message.error(message)
      })
    },
    cancel () {
        this.modals = false;
        // this.tempGoods = {}
    },
    deleteMeal(index){
       this.formValidate.ManyMeal.splice(index, 1);
       this.selectMealIndex = 0;
       console.log("this.formValidate.ManyMeal",   this.formValidate.ManyMeal)
    },
    changeManyMealPriceDate(e){
        this.formValidate.ManyMeal[e.meal_index].productPriceDate = e.finalDataList;
    },
    selectMealHanele(index){
      console.log('selectMealHanele')
      setTimeout(() => {
          this.selectMealIndex = index;
          this.flag++;
      }, 100);
    },
    editMeal(item,index){
      console.log(item,index)
      this.tempMeal = item;
      this.tempMeal.index = index;
      this.mealShowVisible = true;
    },
    addmealShow(){
      this.mealShowVisible = true;
      this.tempMeal = {
        id: '',
        name: "",
        description: '',
        breakfast: 0,
        breakfast_type: '',
         price: '',
        productPriceDate: [],
        index: ''
      }
    },
    handleAddMeal(){
      if(!this.tempMeal.name){
        return this.$message.error("套餐标题不能为空")
      }
    
      this.formValidate.ManyMeal.push(this.tempMeal);
      console.log("this.formValidate.ManyMeal",this.formValidate.ManyMeal)
      this.mealShowVisible = false;
      this.tempMeal = {
        id: '',
        name: "",
        description: '',
        breakfast: 0,
        breakfast_type: '',
         price: '',
        productPriceDate: [],
        index: ''
      }

    },
    handleEditMeal(){
      if(this.tempMeal.index === ''){
        return this.$message.error("编辑失败，缺失套餐索引")
      }
      if(!this.tempMeal.name){
        return this.$message.error("套餐标题不能为空")
      }
    
      console.log("this.tempMeal.index",this.tempMeal.index)
      this.formValidate.ManyMeal[this.tempMeal.index] = this.tempMeal;

      this.mealShowVisible = false;
      this.tempMeal = {
        id: '',
        name: "",
        description: '',
        breakfast: 0,
        breakfast_type: '',
         price: '',
        productPriceDate: [],
        index: ''
      }

    },

  
      
        // 搜索
      querySearch(query, callback) {
        console.log('query',query)
        if(query){
          hotelLstApi({ keyword: query })
          .then(res => {
            callback(res.data.list)
          })
          .catch(res => {
            this.$message.error(res.message)
          })
        }
        
      },
      handleSelectHotel(e){
        this.formValidate.hotel_id = e.id;
         this.hotel_name = e.name;
        
      },
      handleSelectStart(e){
        var that = this;
        // this.formValidate.name = e.pname?e.name:'';
        // this.formValidate.province = e.pname?e.pname:'';
        // this.formValidate.city = e.pname?e.cityname:'';
        // this.formValidate.county = e.adname?e.adname:'';
        // this.formValidate.address = e.address?e.address:'';
        // this.formValidate.type_desc = e.type?e.type:'';
        // this.formValidate.gcj_lng_lat = e.location?e.location:'';
        if(!this.formValidate.open_time && e.biz_ext &&e.biz_ext.opentime2 &&e.biz_ext.opentime2.length){
          this.formValidate.open_time =  e.biz_ext.opentime2
        }
        
        // 如果有照片
        if(e.photos.length){
          this.fullscreenLoading = true;
          var photos = [];
          for(var i =0; i< e.photos.length; i++ ){
            if(e.photos[i].url){
              photos.push(e.photos[i].url)
            }
          }
          if(photos.length){
            onlineUpload({ id: 18, images: photos })
            .then((res) => {
              var data = res.data;

              if(data.length){
                console.log('data',data)
                for(var i =0; i< data.length; i++ ){
                  if(i == 0 && !that.formValidate.image){
                    that.formValidate.image = data[i].path;
                  }
                  that.formValidate.slider_image.push(data[i].path)
                }
              }
              this.$message.success('上传图片成功');
              this.fullscreenLoading = false;
            })
            .catch((err) => {
              this.fullscreenLoading = false;
              this.$message.error(err.message);
            });
          }
          
        }
      },

      addDetailsProduct(index){
        this.mealList[index].details.push({
          scenic_product_name:'',
          product_name: '',
          product_id: '',
        })
        this.flag++
        console.log(' this.mealList',this.mealList.length)
      },
      removeProduct(index,indexd){
        if(indexd != 0){
          this.mealList[index].details.splice(indexd, 1)
          this.flag++
          console.log(' this.mealList',this.mealList)
        }
        
      },
      delMeal(index){
        this.mealList.splice(index, 1)
      },
      addMeal(){
        this.mealList.push({
          meal_name: '',
          details: [
            {
              scenic_product_name: '',
              product_name: '',
              product_id: '',
            }
          ],
        })
        this.flag++
        console.log(' this.mealList',this.mealList)
      },
      removeItem(item) {
        var index = this.formValidate.open_time.indexOf(item)
        if (index !== -1) {
          this.formValidate.open_time.splice(index, 1)
        }
      },
      addItem() {
        this.formValidate.open_time.push({
          date: '',
          time: '',
        })
      },
     
      handleRemove(i) {
        this.formValidate.slider_image.splice(i, 1);
      },
      // 点击产品图
      modalPicTap(tit, num, i) {
        const _this = this;
        const attr = [];
        this.$modalUpload(function(img) {
          if (tit === "1" && !num) {
            _this.formValidate.image = img[0];
          }
          if (tit === "2" && !num) {
            img.map(item => {
              attr.push(item.attachment_src);
              _this.formValidate.slider_image.push(item);
              if (_this.formValidate.slider_image.length > 10) {
                _this.formValidate.slider_image.length = 10;
              }
            });
          }
        }, tit);
      },


      // 移动
      handleDragStart(e, item) {
        this.dragging = item;
      },
      handleDragEnd(e, item) {
        this.dragging = null;
      },
      handleDragOver(e) {
        e.dataTransfer.dropEffect = "move";
      },
      handleDragEnter(e, item) {
        e.dataTransfer.effectAllowed = "move";
        if (item === this.dragging) {
          return;
        }
        const newItems = [...this.formValidate.slider_image];
        const src = newItems.indexOf(this.dragging);
        const dst = newItems.indexOf(item);
        newItems.splice(dst, 0, ...newItems.splice(src, 1));
        this.formValidate.slider_image = newItems;
      },
      // 删除视频；
      delVideo() {
        const that = this
        that.$set(that.formValidate, 'video_link', '')
      },
      zh_uploadFile() {
        if (this.videoLink) {
          this.formValidate.video_link = this.videoLink
        } else {
          this.$refs.refid.click()
        }
      },
      zh_uploadFile_change(evfile) {
        const that = this
        that.progress = 10
        const suffix = evfile.target.files[0].name.substr(
          evfile.target.files[0].name.lastIndexOf('.')
        )
        if (suffix !== '.mp4') {
          return that.$message.error('只能上传MP4文件')
        }
        productGetTempKeysApi().then(res => {
          that.$videoCloud
          .videoUpload({
            type: res.data.type,
            evfile: evfile,
            res: res,
            uploading(status, progress) {
              that.upload.videoIng = status
            }
          })
          .then(res => {
            that.formValidate.video_link = res.url || res.data.src
            that.$message.success('视频上传成功')
            that.progress = 100
          })
          .catch(res => {
            that.upload.videoIng = false
            that.$message.error(res.msg&&res.msg.message || res.message)
          })
        })
      },
      addFac() {
        this.facilityShow = true;
        // this.formValidate.scenic_facility.push({
        //   image: '',
        //   text: '',
        // })
      },
      selectFac(item){
        this.formValidate.scenic_facility.push(item);
        this.facilityShow = false;
      },
      
      removeItemFac(item) {
        var index = this.formValidate.scenic_facility.indexOf(item)
        if (index !== -1) {
          this.formValidate.scenic_facility.splice(index, 1)
        }
      },

      handleSubmitUp() {
        this.currentTab = (Number(this.currentTab) - 1).toString();
      },
      handleSubmitNest(name) {
        this.$refs[name].validate(valid => {
          if (valid) {
            this.currentTab = (Number(this.currentTab) + 1).toString();
          }
        });
      },

      // 提交
      handleSubmit(name, is_return) {
 
      
   
        if(!this.formValidate.ManyMeal.length){
          return   this.$message.error('请至少添加一个房型套餐');
        }
        this.$refs[name].validate(valid => {
          if (valid) {
            this.fullscreenLoading = true;
            this.loading = true;
            let disCreate = this.$route.params.id && !this.$route.query.type;
            disCreate
              ? hotelRoomTypeSaveApi(this.$route.params.id, this.formValidate)
                  .then(async res => {
                    this.fullscreenLoading = false;
                    this.$message.success('保存成功');
                    if(is_return){
                      this.$router.push({ name:  "ProductHotelRoomType" });
                      this.$refs[name].resetFields();
                      this.formValidate.slider_image = [];
                    }
                    
                    
                    this.loading = false;
                  })
                  .catch(res => {
                    this.fullscreenLoading = false;
                    this.loading = false;
                    this.$message.error(res.message);
                  })
              : hotelRoomTypeSaveApi('',this.formValidate)
                  .then(async res => {
                    this.fullscreenLoading = false;
                    this.$message.success('保存成功');
                    if(is_return){
                      this.$router.push({ name:  "ProductHotelRoomType" });
                      this.$refs[name].resetFields();
                      this.formValidate.slider_image = [];
                    }
                    this.loading = false;
                  })
                  .catch(res => {
                    this.fullscreenLoading = false;
                    this.loading = false;
                    this.$message.error(res.message);
                  });
          } else {
            if (!this.formValidate.name.trim()) {
              return this.$message.warning("基本信息-产品名称不能为空");
            }
      
            if (!this.formValidate.image) {
              return this.$message.warning("基本信息-封面图不能为空");
            }
            if (this.formValidate.slider_image.length < 0) {
              return this.$message.warning("基本信息-轮播图不能为空");
            }
          }
        });
      },
          // 添加自定义弹窗
      addCustomDialog(editorId) {
        window.UE.registerUI(
          "test-dialog",
          function(editor, uiName) {
            // 创建 dialog
            let dialog = new window.UE.ui.Dialog({
              iframeUrl: roterPre + "/admin/widget/image?field=dialog",
              editor: editor,
              name: uiName,
              title: "上传图片",
              cssRules: "width:1200px;height:500px;padding:20px;"
            });
            this.dialog = dialog;
            let btn = new window.UE.ui.Button({
              name: "dialog-button",
              title: "上传图片",
              cssRules: `background-image: url(../../../assets/images/icons.png);background-position: -726px -77px;`,
              onclick: function() {
                // 渲染dialog
                dialog.render();
                dialog.open();
              }
            });
            return btn;
          },
          37
        );
        window.UE.registerUI(
          "video-dialog",
          function(editor, uiName) {
            let dialog = new window.UE.ui.Dialog({
              iframeUrl: roterPre + "/admin/widget/video?fodder=video",
              editor: editor,
              name: uiName,
              title: "上传视频",
              cssRules: "width:600px;height:420px;padding:10px 20px 20px;"
            });
            this.dialog = dialog;
            let btn = new window.UE.ui.Button({
              name: "video-button",
              title: "上传视频",
              cssRules: `background-image: url(../../../assets/images/icons.png);background-position: -320px -20px;`,
              onclick: function() {
                // 渲染dialog
                dialog.render();
                dialog.open();
              }
            });
            return btn;
          },
          38
        );
      }
      },
  };
  </script>
  
  <style scoped lang="scss">
  .bg {
    z-index: 100;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
  }
  .goods_detail .goods_detail_wrapper {
    z-index: -10;
  }
  .iframe-box{
    min-height: 300px;
  }
  ::v-deep .specsList th{
    line-height: 20px!important;
  }
  ::v-deep .upLoadPicBox {
    .upLoad {
      -webkit-box-orient: vertical;
      -moz-box-orient: vertical;
      -o-box-orient: vertical;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
      line-height: 20px;
    }
    span {
      font-size: 10px;
    }
  }
  .proCoupon ::v-deep .el-form-item__content {
    margin-top: 5px;
  }
  .tabPic {
    width: 40px !important;
    height: 40px !important;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .noLeft ::v-deep .el-form-item__content {
    margin-left: 0 !important;
  }
  .explanation{
    color: #909399;
  }
  .tabNumWidth ::v-deep .el-input-number--medium {
    width: 100px;
  }
  .tabNumWidth ::v-deep .el-input-number__increase {
    width: 20px !important;
    font-size: 12px !important;
  }
  .tabNumWidth ::v-deep .el-input-number__increase {
    width: 20px !important;
    font-size: 12px !important;
  }
  .tabNumWidth ::v-deep .el-input-number__decrease {
    width: 20px !important;
    font-size: 12px !important;
  }
  .tabNumWidth ::v-deep .el-input-number--medium .el-input__inner {
    padding-left: 25px !important;
    padding-right: 25px !important;
  }
  .priceBox ::v-deep .el-input__inner {
    padding-right: 15px;
  }
  .el-input-number.is-controls-right .el-input__inner{
    padding-right: 15px !important;
  }
  .tabNumWidth ::v-deep .priceBox .el-input-number__decrease,
  .tabNumWidth ::v-deep .priceBox .el-input-number__increase{
    display: none;
  }
  .tabNumWidth ::v-deep .priceBox.el-input-number--small{
    width: 90px!important;
  }
  .tabNumWidth ::v-deep .el-select {
    width: 120px;
  }
  .tabNumWidth ::v-deep thead {
    line-height: normal !important;
  }
  .tabNumWidth ::v-deep .cell {
    line-height: normal !important;
    text-overflow: clip !important;
  }
  .seeCatMy {
    color: var(--prev-color-primary);
    cursor: pointer;
  }	
  .selectOn{
    color: var(--prev-color-primary);
  }	
  .virtual_boder {
    border: 1px solid var(--prev-color-primary);
  }
  .virtual_boder2 {
    border: 1px solid #e7e7e7;
  }
  .virtual_san {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-bottom: 26px solid var(--prev-color-primary);
    border-left: 26px solid transparent;
  }
  .virtual_dui {
    position: absolute;
    bottom: -2px;
    right: 2px;
    color: #ffffff;
    font-family: system-ui;
  }
  .virtual {
    width: 120px;
    height: 60px;
    background: #ffffff;
    border-radius: 3px;
    display: inline-block;
    text-align: center;
    padding-top: 8px;
    position: relative;
    cursor: pointer;
    line-height: 23px;
    .virtual_top {
      font-size: 14px;
      font-weight: 600;
      color: rgba(0, 0, 0, 0.85);
    }
    .virtual_bottom {
      font-size: 12px;
      font-weight: 400;
      color: #999999;
    }
  }
  .virtual:nth-child(2n) {
    margin: 0 12px;
  }
  .desc{
    color: #999999;
    font-size: 12px;
  }
  .addfont {
    display: inline-block;
    font-size: 13px;
    font-weight: 400;
    color: var(--prev-color-primary);
    margin-left: 14px;
    cursor: pointer;
  }
  .titTip {
    display: inline-bolck;
    font-size: 12px;
    font-weight: 400;
    color: #999999;
  }
  .addCustom_content {
    margin-top: 20px;
    .custom_box {
      margin-bottom: 10px;
    }
  }
  .addCustomBox {
    margin-top: 12px;
    font-size: 13px;
    font-weight: 400;
    color: var(--prev-color-primary);
    .btn {
      cursor: pointer;
      width: max-content;
    }
    .remark {
      display: flex;
      margin-top: 14px;
    }
  }
  .pageWidth {
    width: 460px;
  }
  .ml15 {
    margin-left: 15px;
  }
  .button-new-tag {
    height: 28px;
    line-height: 26px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
  .pictrue {
    width: 60px;
    height: 60px;
    border: 1px dotted rgba(0, 0, 0, 0.1);
    margin-right: 10px;
    position: relative;
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .iview-video-style {
    width: 40%;
    height: 180px;
    border-radius: 10px;
    background-color: #707070;
    margin-top: 10px;
    position: relative;
    overflow: hidden;
  }
  .iconv {
    color: #fff;
    line-height: 180px;
    display: inherit;
    font-size: 26px;
    position: absolute;
    top: -74px;
    left: 50%;
    margin-left: -25px;
  }
  .iview-video-style .mark {
    position: absolute;
    width: 100%;
    height: 30px;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
  }
  .uploadVideo {
    margin-left: 10px;
  }
  .perW50 {
    width: 50%;
  }
  .submission {
    margin-left: 10px;
  }
  .btndel {
    position: absolute;
    z-index: 1;
    width: 20px !important;
    height: 20px !important;
    left: 46px;
    top: -4px;
  }
  .labeltop ::v-deep .el-form-item__label {
    float: none !important;
    display: inline-block !important;
    margin-left: 120px !important;
    width: auto !important;
  }
  ::v-deep .upload-form-coupon{
    width: 900px!important;
  }
  .idcard-tip{
    width: 50px;
    height: 20px;
    font-size: 10px;
    line-height: 20px;
    background-color: #e0eff5;
    color: #6898ff;
    text-align: center;
    margin-right: 10px;
    border-radius: 5px;
    padding: 0 2px;
  }  

 .facility-list {
    display: flex;
    flex-wrap: wrap;
    padding-left: 12px;
    padding-right: 4px
}

.facility-list .facility-item {
    flex-basis: calc((100% - 8px - 32px)/5);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 8px;
    position: relative;
    padding-top: 12px;
    padding-bottom: 8px;
    margin-right: 20px
}



.facility-list .facility-item .facility-icon {
    width: 20px;
    height: 20px;
    background: #fff
}

.facility-list .facility-item .facility-text {
    font-size: 11px;
    color: #111;
    line-height: 12px;
    text-align: center;
    margin-top: 2px
}

.meal-bl-noselect {
    border-radius: 5px;
    max-width: 200px;
    border: 1px solid #e5e5e5;
    background: #f7f7f7;
    padding: 5px 10px;
    color: #000;
    font-weight: 700;
    max-height: 120px;
    line-height: 30px;
}
.meal-bl-select {
    border-radius: 5px;
    max-width: 200px;
    border: 1px solid #3c72e4;
    background: #f5f8ff;
    padding: 5px 10px;
    color: #000;
    font-weight: 700;
    max-height: 120px;
     line-height: 30px;
}

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: #fff;
    -webkit-box-shadow: 0 -1px 4px rgba(0, 0, 0, .1);
    box-shadow: 0 -1px 4px rgba(0, 0, 0, .1);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    z-index: 1;
}


 
.del-box{
		position: absolute;
		right: -25px;
		top: -18px;
		cursor: pointer;
		.iconfont{
			color: #8f8f8f;
			font-size: 24px;
		}
	}
  </style>
  